import * as $util from '/lib/hc-util.js'
import {} from '/com/hc-rule-basic-properties.js'


const template =
    `
<el-dialog :visible.sync="visible" title="流程属性设置">
    <el-tabs value='config'>
        <el-tab-pane label="基本信息" name="rbasic">
            <hc-rule-basic :ruledef='ruleDef'></hc-rule-basic>
        </el-tab-pane>
        <el-tab-pane label="返回设置" name="config">
            <el-form ref="settingform" label-width="80px">
                <el-table :indent="20" :data="ruleDef.retList" style="width: 100%;margin-bottom: 20px;"
                    row-key="id" border empty-text='没有设置要返回给请求方的变量。'
                   >
                    <el-table-column label="#" prop="id" min-width='20px'>
                    </el-table-column>
                    <el-table-column label="作为结果返回">
                        <template slot-scope="scope">
                            <el-cascader style='width: 100%;' :change-on-select='true' :props="{label:'label',value:'id',children:'list',expandTrigger:'hover',emitPath:false}"
                                v-model='scope.row.referId' placeholder="关键字搜索" :options="variTree"
                                filterable clearable>
                            </el-cascader>
                        </template>
                    </el-table-column>
                    <el-table-column title="操作" min-width='40px'>
                        <template slot="header">
                            <span>操作</span>
                            <el-button type="success" size='mini' @click="handleAppend">追加(+)
                            </el-button>
                        </template>
                        <template slot-scope="scope">
                            <el-button plain type="danger" size='mini' @click="handleDelete(scope.$index)">X</el-button>
                            <el-button type="primary" size='mini' @click="handleInsert(scope.$index)">干</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>
        </el-tab-pane>
    </el-tabs>
    <el-form label-width="80px">
        <el-form-item>
            <el-button @click='handleSettingSubmit' type="primary">确认</el-button>
        </el-form-item>
    </el-form>
</el-dialog>
`;

const vmconfig = {
    template: template,
    data: function() {
        let variTree = $pinfo.ruleList.find(it => it.rtype == 'variable').list;
        $util.$tree.enlabel(variTree);
        return {
            ruleDef:{},
            visible: false,
            variTree: variTree,
        }
    },
    watch: {
    },
    methods: {
        newItem: function() {
            let item = {
                id: $util.maxOfProp(this.ruleDef.retList, 'id') + 1,
                referId: 0,
                referName: '',
            };
            return item;
        },
        handleAppend: function() {
            this.ruleDef.retList.push(this.newItem())
        },
        handleInsert: function(index) {
            this.ruleDef.retList.splice(index, 0, this.newItem())
        },
        handleDelete: function(index) {
            this.ruleDef.retList.splice(index, 1)
        },
        handleSettingSubmit: function() {
            $util.removeIf(this.ruleDef.retList,it=>!it.referId);
            this.visible = false;
        },
        show: function(ruleDef) {
            this.ruleDef = ruleDef;
            this.ruleDef.retList = this.ruleDef.retList || []
            this.visible = true;
        },
    },

};

function FlowRuleSetting(userconfig) {
    userconfig = userconfig || {}
    let vm = new Vue(vmconfig);
    vm = Object.assign(vm, userconfig)
    if (userconfig.el == undefined) { //???
        vm.$mount();
        document.body.appendChild(vm.$el);
    }
    return vm;
}

export default FlowRuleSetting
